<template>
  <div>
    <v-header></v-header>
    <div>
      <div class="ris_cont">
        <div class="collar_cont_headPar">
        <table class="collar_cont_head">
          <tr>
            <td>门诊号/住院号</td>
            <td><input type="text" v-model="assignInfo.pid"/></td>
            <td>姓名</td>
            <td><input type="text" v-model="assignInfo.name"/></td>
            <td>性别</td>
            <td>
              <select v-model="assignInfo.sex">
                <option></option>
                <option>男</option>
                <option>女</option>
              </select>
            </td>
            <td>年龄</td>
            <td>
              <input type="text" class="collar_cont_head_age" v-model="assignInfo.beginAge"/>
              <span class="collar_cont_head_span">至</span>
              <input type="text" class="collar_cont_head_age" v-model="assignInfo.endAge"/>
              <!--<select class="collar_cont_head_ageUnit">-->
                <!--<option>岁</option>-->
                <!--<option>月</option>-->
                <!--<option>日</option>-->
              <!--</select>-->
            </td>
            <td>患者类型</td>
            <td>
              <select v-model="assignInfo.patType">
                <option value=""></option>
                <option>门诊</option>
                <option>住院</option>
                <option>急诊</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>设备类型</td>
            <td>
              <select v-model="assignInfo.eqpType" @change="getEqpName">
                <option></option>
                <option v-for="item in eqpTypeList" v-bind:value="item">{{item.name}}</option>
              </select>
            </td>
            <td>设备名称</td>
            <td>
              <select v-model="assignInfo.eqpName">
                <option></option>
                <option v-for="item in eqpList" v-bind:value="item.code">{{item.name}}</option>
              </select>
            </td>
            <td>影像号</td>
            <td><input type="text" v-model="assignInfo.accessNo"/></td>
            <td>影像数量</td>
            <td>
              <input type="text" class="collar_cont_head_num" v-model="assignInfo.beginNum">
              <span class="collar_cont_head_numText">至</span>
              <input type="text" class="collar_cont_head_num" v-model="assignInfo.endNum"/>
            </td>
            <td>检查部位</td>
            <td>
              <!--<select v-model="assignInfo.partName">-->
                <!--<option v-for="item in partList" :label="item.name">{{item.name}}</option>-->
              <!--</select>-->
              <div class="drop_down_menuN">
                <input type="text" placeholder="输入检索信息" v-model="assignInfo.partName"/>
                <ul class="scroll2">
                  <li v-for="item in partList" @click="assignInfo.partName=item.name">{{item.name}}</li>
                </ul>
              </div>
            </td>
            <!--<td>所属医生</td>-->
            <!--<td>-->
              <!--<select>-->
                <!--<option>XXXXX</option>-->
              <!--</select>-->
            <!--</td>-->
          </tr>
          <tr>
            <td>检查日期</td>
            <td><input type="date" v-model="assignInfo.beginTime"/></td>
            <td>至</td>
            <td><input type="date" v-model="assignInfo.endTime"/></td>
            <td>报告人</td>
            <td>
              <select v-model="assignInfo.destName">
                <option></option>
                <option v-for="item in docList">{{item.name}}</option>
              </select>
            </td>
            <td>紧急程度</td>
            <td>
              <select v-model="assignInfo.emergstatus">
                <option></option>
                <option>紧急</option>
                <option>普通</option>
              </select>
            </td>
            <td>分配状态 </td>
            <td>
              <select v-model="assignInfo.assignStatus">
                <option :value="5">已拍片</option>
                <option :value="10">已分配</option>
              </select>
            </td>
          </tr>
        </table>
          <div class="collar_cont_head_right collar_cont_head_btn">
            <button class="button btn_blur" @click="assignReport">分配</button>
            <button class="button btn_the_green Dist_allotment"  @click="getAssign">查询</button>
          </div>
      </div>
        <div class="collar_content">
        <table class="collar_contentTable" v-loading="loading">
          <thead>
          <tr>
            <th><input type="checkbox" @click="checkedAll" v-model="checked"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>病历号</th>
            <th>患者类型</th>
            <th>紧急程度</th>
            <th>性别</th>
            <th>年龄</th>
            <!--<th>出生日期</th>-->
            <th>影像号</th>
            <th>检查部位</th>
            <th>设备</th>
            <th>设备类型</th>
            <th>图像数量</th>
            <th>拍片时间</th>
            <th>报告分配人</th>
            <th>分配时间</th>
            <th>报告医师</th>

          </tr>
          </thead>
          <tbody>
          <tr v-for="item in assignList">
            <td><input type="checkbox" v-model="checkBox" :value="item.infoId"></td>
            <td>{{item.infoId}}</td>
            <td>{{item.cname}}</td>
            <td>{{item.pid}}</td>
            <td>{{item.patType}}</td>
            <td>
              <el-tag type="danger" v-if="item.emergStatus=='紧急'">{{item.emergStatus}}</el-tag>
              <el-tag type="success" v-if="item.emergStatus==null">普通</el-tag>
            </td>
            <td>{{item.sex}}</td>
            <td>{{item.age}}</td>
            <!--<td>{{item.birthday}}</td>-->
            <td>{{item.accessNo}}</td>
            <td>{{item.partName}}</td>
            <td>{{item.eqpName}}</td>
            <td>{{item.eqpTypeName}}</td>
            <td>{{item.imagecount}}</td>
            <td>{{item.photoTime}}</td>
            <td>{{item.changeuserName}}</td>
            <td>{{(item.changeTime) | formatday}}</td>
            <td>{{item.destName}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      </div>
    </div>
    <div class="modal Dist_modal" style="display: block;" v-show="showAssign">
    <div>
      <p class="Dist_modal_head line_height_32">医师分配<span class="Dist_modal_cancel" @click="showAssign=false">X</span></p>
      <ul class="Dist_modal_ul clear">
        <li v-for="item in docList">
          <div @click.self="checkDoc(item)">{{item.name}}
            <span v-show="showCheckDoc(item.code)">√</span>
          </div>
        </li>
      </ul>
      <div class="Dist_modal_footBtn">
        <button class="button btn_blur" @click="beginAssign">确认</button>
        <button class="button btn_yellow Dist_modal_cancel" @click="showAssign=false">取消</button>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import Header from '@/components/Header/Header';
  import { Message, MessageBox,Notification } from 'element-ui'
  import * as assign from '@/api/assign'

  export default {
    components: {
      'v-header': Header
    },
    name: "index",
    data() {
      return {
        assignInfo: {
          pid:'',
          name:'',
          sex:'',
          beginAge:'',
          endAge:'',
          eqpType:'',
          eqpName:'',
          accessNo:'',
          partName:'',
          destCode:'',
          destName:'',
          beginTime:'',
          endTime:'',
          patType:'',
          emergstatus:'',
          beginNum:'',
          endNum:'',
          assignStatus:'5',
        },
        eqpTypeCode:'',
        assignList:'',    //大列表数据
        eqpTypeList:'',   //仪器型号列表
        eqpList:'',       //仪器列表
        partList:'',      //部位列表
        docList:'',       //报告人列表
        checkBox: [],     //选中的pid
        checkDocCode: [],     //选中的医生
        checked: '',
        loading: false,
        showAssign: false,    //医生选择框状态
        showPart: false
        // selectFlag: true
      }
    },
    created() {
      //查询大列表
      this.loading=true
      assign.getAssignList(this.assignInfo).then(response => {
        this.loading=false;
        this.assignList = response.data;
      })
      //设备类型
      assign.getEqpType().then(response => {
        this.eqpTypeList = response.data;
      })
      //设备名称
      assign.getEqp(this.eqpTypeCode).then(response => {
        this.eqpList = response.data;
      })
      //部位名称
      assign.getPart().then(response => {
        this.partList = response.data;
      })
      //报告人
      assign.getPacsUser().then(response => {
        /*for (var i in response.data){
          response.data[i].selectFlag = false;
        }*/
        this.docList = response.data;
      })
    },
    methods: {
      //点击分配
      assignReport() {
        this.showAssign=true;
      },
      //获得仪器
      getEqpName() {
        assign.getEqp(this.assignInfo.eqpType.code).then(response => {
          this.eqpList = response.data;
        })
      },
      //多条件查询
      getAssign() {
        this.loading=true;
        assign.getAssignList(this.assignInfo).then(response => {
          this.loading=false;
          this.assignList = response.data;
        })
      },
      //选择医生
      checkDoc(item) {
        // item.selectFlag=!item.selectFlag;
        for(var i in this.checkDocCode) {
          if(this.checkDocCode[i]==item.code){
            this.checkDocCode.splice(i,1);
            return;
          }
        }
        this.checkDocCode.push(item.code);
      },
      //开始分配
      beginAssign() {
        assign.assignReportByPid(this.checkBox, this.checkDocCode).then(response => {
          this.showAssign = false;
          this.getAssign();
          this.checkBox=[];
          this.checkDocCode=[];
          this.$notify.success({
            title: '成功',
            message: response.data,
            duration: 2000,
            // offset: 100
          });
        })
      },
      //全选
      checkedAll() {
        var _this = this;
        // console.log(_this.checkBox);
        if (this.checked) {//实现反选
          _this.checkBox = [];
        }else{//实现全选
          _this.checkBox = [];
          _this.assignList.forEach(function(item) {
            _this.checkBox.push(item.pid);
          });
        }
      },
      //
      showCheckDoc(code) {
        for(var i in this.checkDocCode) {
          if(this.checkDocCode[i]==code){
            return true;
          }
        }
        return false;
      }
    },
    mounted(){



      $('.drop_down_menuN').on('click','li',function () {
        $(this).parent().hide();
      }).on('click','input',function () {
        $(this).siblings('ul').show();
      });
      $(document).bind('click',function (e) {
        var target = $(e.target);
        if(target.closest('.drop_down_menuN').length==0){
          $('.drop_down_menuN').children('ul').hide();
        }
      })


      // $pg.drop_down_menu('.drop_down_menu');
    },
    computed: {

    },
    filters: {
      formatday(timestamp) {
        if(timestamp==undefined) {
          return "";
        }
        var seperator2 = ":";

        var date=new Date(timestamp);
        var seperator1 = "-";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var dateStr = date.getFullYear() + seperator1 + month + seperator1 + strDate+
          " " + (date.getHours()<10?"0"+date.getHours():date.getHours()) + seperator2
          + (date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes()) +
          seperator2 + (date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds());
        return dateStr;
      }
    }
  }
</script>

<style scoped>

  /*八、 input输入带下拉和检索*/
  .drop_down_menuN{
    display: inline-block;
    width: 100%;
    height: 32px;
    position: relative;
  }
  .drop_down_menuN>input{
    width: 100%;
    height: 100%;
  }
  .drop_down_menuN>ul{
    position: absolute;
    left: 0;
    top: 36px;
    border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 240px;
    overflow: auto;
    z-index: 1;
    background-color: #fff;
    display: none;
  }
  .drop_down_menuN>ul li{
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    line-height: 32px;
    cursor: pointer;
    padding: 0 10px;
  }



  /*内容*/

  .collar_cont_head_right{
    float: right;
    margin-right: 2%;
    width: 10%;
  }

  .collar_cont_headPar{
    background: #fff;
    margin: 10px auto;
    padding: 5px 0;
  }
  .collar_cont_head{
    line-height: 40px;
    width: 86%;
    float: left;
    margin-left: 2%;
  }
  .collar_cont_head tr td:nth-child(1){width: 8%;}
  .collar_cont_head tr td:nth-child(2){width: 12%;}
  .collar_cont_head tr td:nth-child(3){width: 8%;text-align-last: center !important;}
  .collar_cont_head tr td:nth-child(4){width: 12%;}
  .collar_cont_head tr td:nth-child(5){width: 8%;}
  .collar_cont_head tr td:nth-child(6){width: 12%;}
  .collar_cont_head tr td:nth-child(7){width: 8%;}
  .collar_cont_head tr td:nth-child(8){width: 12%;}
  .collar_cont_head tr td:nth-child(9){width: 8%;}
  .collar_cont_head tr td:nth-child(10){width: 12%;}
  .collar_cont_head tr td:nth-child(odd){
    padding: 0 5px;
    text-align-last: justify;
  }
  .collar_cont_head tr td input,.collar_cont_head tr td select{
    width: 100%;
  }
  .collar_cont_head tr td span.collar_cont_head_span{
    width: 20%;
    display: block;
    float: left;
    text-align: center;
  }
  .collar_cont_head tr td input.collar_cont_head_age{
    width: 40%;
    display: block;
    float: left;
    position: relative;
    top: 7px;
  }
  .collar_cont_head tr td select.collar_cont_head_ageUnit{
    width: 35%;
    display: block;
    float: left;
  }
  .collar_cont_head tr td input.collar_cont_head_num{
    width: 40%;
    display: block;
    float: left;
    margin-top: 7px;
  }
  .collar_cont_head tr td .collar_cont_head_numText{
    width: 20%;
    display: block;
    float: left;
    text-align: center;
  }
  .collar_cont_head_btn{
    text-align: right;
  }
  .collar_cont_head_btn button{
    height: 32px;
    width: 80%;
    padding: 0 20%;
    margin-left: 10px;
    margin-top: 15px;
  }

  .collar_contentTable tr  input[type=checkbox]{
    position: relative;
    top: 5px;
  }




  /*内容列表*/
  .collar_content{
    width: 100%;
    margin: 15px auto 0;
    background: #fff;
  }
  .collar_contentTable{
    width: 100%;
    text-align: center;
    line-height: 36px;
  }
  .collar_contentTable tr td{
    border: 1px solid #ddd;
  }
  .collar_contentTable thead tr{
    background: #999;
    color: #fff;
  }
  .collar_contentTable tbody tr{
    cursor: pointer;
  }
  .collar_contentTable tbody tr:hover{
    background: #f6f6ff;
  }
  .collar_contentTable tbody tr td button{
    width: 30%;
    margin: 0 3%;
    height: 28px;
    border-radius: 3px;
    border: 1px solid #ddd;
  }


  /*模态*/
  .Dist_modal>div{
    width: 400px;
    height: 400px;
    background: #fff;
    border-radius: 10px;
  }
  .Dist_modal_head{
    padding-left: 15px;
    background: #999;
    color: #fff;
    line-height: 40px;
    border-radius: 10px 10px 0 0;
    position: relative;
  }
  .Dist_modal_head span{
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 20px;
    font-size: 20px;
    cursor: pointer;
  }
  .Dist_modal_head span:hover{
    background: #bbb;
  }

  .Dist_modal_ul{
    width: 90%;
    margin: 10px auto;
    height: 280px;
    overflow: auto;
    border: 1px solid #f7f7ff;
  }
  .Dist_modal_ul li{
    width: 33.33%;
    float: left;
    margin: 5px auto;
  }
  .Dist_modal_ul li div{
    width: 80%;
    height: 32px;
    line-height: 32px;
    background: #f7f7fe;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    margin: 5px auto 0;
  }
  .Dist_modal_ul li div:hover{
    background: #efefef;
  }
  .Dist_modal_ul li div span{
    /*display: none;*/
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #00a6c8;
    color: #fff;
    line-height: 18px;
    z-index: 10;
    right: -9px;
    top: -9px;
  }
  .Dist_modal_footBtn{
    text-align: right;
  }
  .Dist_modal_footBtn button{
    margin-right: 15%;
    padding: 8px 30px;
    margin-top: 8px;
  }


  /*.zhuxiaoLogin{*/
    /*background: url("../comstyle/img/zhuxiao_03.png") no-repeat left center;*/
    /*background-size: 18px;*/
    /*cursor: pointer;*/
  /*}*/
  /*.zhuxiaoLogin:hover{*/
    /*opacity: .8;*/
  /*}*/
  /*.ts_Text{*/
    /*background: url("../comstyle/img/tishiText_06.png") no-repeat 16px center;*/
    /*background-size: 7px;*/
  /*}*/
</style>
